<template>
    <div class="infobar" style="width:100%">
        <v-container>
            <v-row>
                <v-col>
                    <v-card tile outlined>
                        <v-card-text >
                            <v-row align="center" >
                                <v-col>
                                    国家地区
                                </v-col>
                                <v-col>
                                    <div ><font color="red"> 全球 </font></div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </v-col>
                <v-col v-for="(item,index) in data" :key='item.index' :value='item.value' :i='item'>
                    <v-card v-if="index == 'total_infect' " tile outlined>
                        <v-card-text >
                            <v-row align="center">
                                <v-col>
                                    累计确诊
                                </v-col>
                                <v-col>
                                    <div ><font color="red"> {{item}} </font></div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                    <v-card v-else-if="index == 'total_death' " tile outlined>
                        <v-card-text >
                            <v-row align="center">
                                <v-col>
                                    累计死亡
                                </v-col>
                                <v-col>
                                    <div ><font color="red"> {{item}} </font></div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                    <v-card v-else-if="index == 'new_infect' " tile outlined>
                        <v-card-text >
                            <v-row align="center">
                                <v-col>
                                    新增确诊
                                </v-col>
                                <v-col>
                                    <div ><font color="red"> {{item}} </font></div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                    <v-card v-else-if="index == 'new_death' " tile outlined>
                        <v-card-text >
                            <v-row align="center">
                                <v-col>
                                    新增死亡
                                </v-col>
                                <v-col>
                                    <div ><font color="red"> {{item}} </font></div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>
<script>
export default {
    name:'infobar',
    props:['data'],
    data(){
        return{

        }
    }
}
</script>